.saveSeriesContainer {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  background-color: var(--bg-primary);
  max-width: 1200px;
  justify-content: space-around;
  border-bottom: 1px solid var(--border-color);
}

.routesForm {
  display: flex;
  align-items: center;
  gap: 10px;
}

#routes-dropdown {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
  user-select: none;
  white-space: nowrap;
}

.performance-dropdown,
#routes-select,
#snapshot-select,
.control-select {
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  font-size: 14px;
  padding: 6px 12px;
  border-radius: 6px;
  min-width: 140px;
  cursor: pointer;
  transition: all 200ms ease;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%236b7280'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 16px;
}

.performance-dropdown:hover,
#routes-select:hover,
#snapshot-select:hover,
.control-select:hover {
  border-color: var(--border-color-dark);
  background-color: var(--bg-tertiary);
}

.performance-dropdown:focus,
#routes-select:focus,
#snapshot-select:focus,
.control-select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px rgba(20, 184, 166, 0.1);
}

.routes,
.control-select option {
  padding: 0.5rem;
  color: var(--text-primary);
}

// bar graph background
.perf-rect {
  fill: var(--bg-secondary);
}

.bargraph-position {
  background-color: var(--bg-secondary);
}
